<script setup>

import ChallengeItem from '@/components/ChallengeItem.vue'
import { computed, onMounted, reactive, ref } from 'vue'
import { reqGetChallengeOrderPrizes } from '@/api/bag/index.js'
import ChallengePrize from '@/components/ChallengePrize.vue'
import UserInfo from '@/components/UserInfo.vue'

const prizeList = ref([])
const loading = ref(false)
const total = ref(0)
const refreshing = ref(false)
const showUserType = ref(false)
const currentUserType = ref('')

const queryParams = reactive({
  userId: '',
  type: '',
  page: 1
})

const onRefresh = () => {
  queryParams.page = 1
  total.value = 0
  refreshing.value = true
  getChallengeOrderPrizes()
}

const onLoadMore = () => {
  loading.value = true
  getChallengeOrderPrizes()
}

const onSubmit = () => {
  onRefresh()
}

onMounted(() => {
  refreshing.value = true
  getChallengeOrderPrizes()
})

const getChallengeOrderPrizes = async () => {
  try {
    const result = await reqGetChallengeOrderPrizes(queryParams)
    if (result.code === 200) {
      if (queryParams.page === 1) {
        prizeList.value = result.data.data
      } else {
        prizeList.value.push(...result.data.data)
      }
      queryParams.page++
      total.value = result.data.total
    }
  } catch (e) {
    console.log(e)
  } finally {
    loading.value = false
    refreshing.value = false
  }
}

const userTypes = [
  { text: '全部', value: '' },
  { text: '普通用户', value: '1' },
  { text: '主播', value: '2' },
  { text: '推广员', value: '3' }
]

const onConfirm = ({ selectedOptions }) => {
  queryParams.type = selectedOptions[0].value
  currentUserType.value = selectedOptions[0].text
  showUserType.value = false
}

const reset = () => {
  queryParams.page = 1
  queryParams.type = ''
  queryParams.userId = ''
  onRefresh()
}

const userRole = computed(() => {
  return (item) => {
    const is_anchor = item.is_anchor
    const is_agent = item.is_agent

    let str = ''

    if (!is_anchor && !is_agent) {
      str += '普通用户'
      return str
    }

    if (is_anchor) {
      str += '主播 '
    }

    if (is_agent) {
      str += '推广员 '
    }
    return str
  }
})
</script>

<template>
  <div class="bag-container">
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="queryParams.userId"
          name="用户ID"
          label="用户ID"
          placeholder="用户ID"
          clearable
        />
        <van-field
          v-model="currentUserType"
          is-link
          readonly
          name="picker"
          label="用户等级"
          placeholder="点击选择用户等级"
          @click="showUserType = true"
        />
        <van-popup v-model:show="showUserType" position="bottom">
          <van-picker
            :columns="userTypes"
            @confirm="onConfirm"
            @cancel="showUserType = false"
          />
        </van-popup>
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button type="primary" native-type="submit">
          搜索
        </van-button>
        <van-button @click="reset" native-type="reset">重置</van-button>
      </div>
    </van-form>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model:loading="loading"
        :finished="queryParams.page * 10 >= total"
        finished-text="没有更多了"
        @load="onLoadMore"
      >
        <div class="prize-item" v-for="item in prizeList" :key="item.id">
          <UserInfo :avatar="item.avatar" :role="userRole(item)" :id="item.user_id" :nickname="item.nickname" />
		  <div style="width: 100px;text-align: center;font-size: 18px;color: red;">{{item.nums}}</div>
          <div class="prize-info">
            <div>{{item.challenge_box_name}}</div>
            <div>{{item.level_name}} ￥{{item.recovery_price}} {{item.status_name}}</div>
            <div>{{item.created_at}}</div>
          </div>
        </div>
      </van-list>
      <van-back-top bottom="10vh" />
    </van-pull-refresh>
  </div>
</template>

<style scoped lang="less">
.bag-container {
  .prize-item {
    display: flex;
    align-items: center;
    padding: 10px;
  }
}
</style>